<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>class实现动画面板</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .sl{
            width: 200px;
            display: flex;
            flex-direction: column;
        }

        dt{
            width: 100%;
            border-radius: 4px 4px 0 0;
            background: #023047;
            color: white;
        }

        dd{
            width: 100%;
            height: 150px;
            border-radius: 0 0 4px 4px;
            margin-bottom: 15px;
        }

        dd > div{
            width: 100%;
            height: 100%;
            background: #fb8500;
        }

    </style>
</head>
<body>
    <div class="sl">
        <dt>后盾人</dt>
        <dd>
            <div>houdunren.com</div>
        </dd>
        <dt>后盾人</dt>
        <dd>
            <div>hdms</div>
        </dd>
        <dt>后盾人</dt>
        <dd>
            <div>xiasnn</div>
        </dd>
    </div>
    <script>
        class Animation{
            constructor(el){
                this.el = el;
                this.isShow = true;
                this.timeOut = 5;
                this.defaultHeight = this.height;
            }

            hide(callback){
                this.isShow = false;
                let id = setInterval(() => {
                    if(this.height <= 0){
                        clearInterval(id);
                        callback && callback();
                        return;
                    }
                    this.height = this.height - 1;
                }, this.timeOut);
            }

            show(callback){
                this.isShow = false;
                let id = setInterval(() => {
                    if(this.height >= this.defaultHeight){
                        clearInterval(id);
                        callback && callback();
                        return;
                    }
                    this.height = this.height + 1;
                },this.timeOut);
            }

            set height(height){
                this.el.style.height = height + "px";
            }

            get height(){
                return window.getComputedStyle(this.el).height.slice(0,-2)*1;
            }
        }

        // let hd = new Animation(document.querySelector('.sl'));
        // hd.hide(() => {
        //     console.log("隐藏完成");
        //     hd.show(() => {
        //         console.log("全部显示");
        //     })
        // });

        class Slider{
            constructor(el){
                this.el = document.querySelector(el);
                this.links = this.el.querySelectorAll('dt');
                // this.panels = this.el.querySelectorAll('dd');
                this.panels = [...this.el.querySelectorAll('dd')].map(
                    item  => new Panel(item)
                )
                this.bind();
            }

            bind(){
                this.links.forEach((item,idx)=> {
                    item.addEventListener('click',() => {
                        this.action(idx);
                    })
                });
            }

            action(idx){
                Panel.hideAll(Panel.itemFilter(this.panels,idx),() => {
                    this.panels[idx].show();
                });
            }
        }

        class Panel extends Animation{

            static num = 0;
            
            static hideAll(items,callback){

                if(Panel.num > 0) return;

                items.forEach(item => {
                    Panel.num++;
                    item.hide(() => {
                        Panel.num--;
                    })
                });

                callback && callback();
            }

            static itemFilter(items,idx){
                return items.filter((items,index) => idx != index);
            }
        }

        let hd = new Slider(".sl");
    </script>
</body>
</html>